<html>

<head>
	<title>数据迁移平台控制台v1.0</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../static/react/react.development.js" type="text/javascript"></script>
    <script src="../static/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../static/react/moment-with-locales.min.js" type="text/javascript"></script>
	<script src="../static/react/babel.min.js" type="text/javascript"></script>
	<!-- antd -->
    <link href="../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
	<script src="../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../static/react/qs.js" type="text/javascript"></script>
    <script src="../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../static/react/request.js" type="text/javascript"></script>
    <link href="../static/react/common.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #app .logo {
        float: left;
        width: 120px;
        height: 31px;
        margin: 16px 24px 16px 0;
        background: rgba(255, 255, 255, 0.2);
    }
    .site-layout .site-layout-background {
        background: #fff;
    }
    </style>
</head>

<body>
    <div id="app"></div>
        
    <script type="text/babel">
    const baseURL = '../'
    const { Layout, Menu, Divider, Modal, Button, Tabs } = antd
    const { Header, Content, Footer } = Layout
    class Root extends React.Component {
        constructor(props) {
            super(props)
            this.loadUserMenu = this.loadUserMenu.bind(this)
            this.getSubList = this.getSubList.bind(this)
            this.getSubResource = this.getSubResource.bind(this)
            this.menuItemClick = this.menuItemClick.bind(this)
            this.handleModelClose = this.handleModelClose.bind(this)
            this.windowResize = this.windowResize.bind(this)
            this.tabChange = this.tabChange.bind(this)
            this.tabEdit = this.tabEdit.bind(this)
            this.state = { 
                subsystemList : [],
                menuList : [],
                userName: "",
                userId: "",
                systemName: "",
                modelTitle: "",
                modelIframeUrl: "",
                loading: "",
                show: false,
                tabs: [{
                    key: "homePage",
                    name: "首页",
                    path: "admin/HomePage.html",
                    closable: false
                }],
                currentTab: "homePage",
                iframeHeight: 0
            }
        }
        loadUserMenu(){
            const self = this 
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/admin/menus"
            }).then(function(data){
                self.setState({
                    userName: data.rows.actorName,
                    userId: data.rows.actorNo,
                })
                self.getSubList(data.rows.actorNo)
            })
        }
        getSubList(actorNo) {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                url: 'api/s/user/subs/info/'+actorNo
            }).then(function(data){
                let subsystem = data.rows || [];
                let subsystemList = subsystem.map(function(value, index){
                    return {
                        cnname: value.subsName,
                        url: value.url || "#",
                        resourceid: value.subsCode,
                        childs:[]
                    }
                });
                self.setState({
                    subsystemList: subsystemList
                })
                self.getSubResource(subsystemList[0]);
            })
        }
        getSubResource(sub) {
            const self = this
            self.setState({"systemName": sub.cnname})
            window.subsCode = sub.resourceid
            document.title=sub.cnname;
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/resource/all/" + sub.resourceid
            }).then(function(data){
                let menuList=data.map(function(value, index){
                    return {
                        name: value.text,
                        url: value.url || "#",
                        resourceid: value.id,
                        childs:value.children.map( function(chindVal){
                            return self.recursiveMap(chindVal)
                        })
                    }
                });
                self.setState({"menuList": menuList})
            })
        }
        recursiveMap(node){
            return {
                name: node.text,
                url: node.url || "#",
                resourceid: node.id,
                parentId: node.parentId,
                childs: node.children && node.children.length > 0 ? node.children.map(this.recursiveMap) : []
            }
        }
        menuItemClick({ item, key, keyPath, domEvent }) {
            console.log(key, keyPath)
            const path = keyPath.reverse()
            if (key == 'modifyPwd') {
                this.setState({
                    modelIframeUrl: 'admin/ModifyPassword.html',
                    modelTitle: "修改密码",
                    show: true
                })
            } else if (key == "changeTheme") {
                this.setState({
                    modelIframeUrl: '../uistyle.html',
                    modelTitle: "更换风格",
                    show: true
                })
            } else if (key == "logout") {
                API.request({
                    baseURL: baseURL,
                    method: "post",
                    url: "api/logout",
                }).then(function(data){
                    window.location.href = baseURL + '/login.html'; 
                })
            } else if (key == 'homePage') {
                this.setState({
                    currentTab: "homePage"
                })
            } else if (path[0] == 'subsystem') {
                // switch system menu 
                const target = this.state.subsystemList.find(function(sub){
                    return sub.resourceid == key
                })
                target && this.getSubResource(target)
            } else {
                // menu list click
                if (this.state.tabs.find(function(t){ return t.key == key})) {
                    this.setState({
                        currentTab: key
                    })
                    return
                }
                const menuList = this.state.menuList
                let target = this.state.menuList.find(function(menu){ return menu.resourceid == path[0]})
                for (let i=1; i<path.length; i++) {
                    const p = path[i]
                    target = target.childs.find(function(sub){ return sub.resourceid == p})
                }
                if (target) {
                    const tab = this.state.tabs.find(function(t){return t.key == target.resourceid})
                    if (tab) {
                        this.setState({
                            currentTab: tab.key
                        })
                    } else {
                        this.setState(function(state){
                            let tabs = state.tabs
                            tabs.push({
                                key: target.resourceid,
                                name: target.name,
                                path: target.url,
                                closable: true
                            })
                            return {
                                tabs,
                                currentTab: key
                            }
                        })
                    }
                }
            }
        }
        handleModelClose() {
            this.setState({
                show: false
            })
        }
        createSubMenu(menu) {
            if (menu.childs && menu.childs.length > 0) {
                return (
                    <Menu.SubMenu key={menu.resourceid} title={menu.name}>
                        {
                            menu.childs.map((sub, index)=> {
                                if (sub.childs && sub.childs.length > 0) {
                                    return this.createSubMenu(sub)
                                } else {
                                    return <Menu.Item key={sub.resourceid}>{sub.name}</Menu.Item>
                                }
                            } )
                        }
                    </Menu.SubMenu>
                )
            } else {
                return <Menu.Item key={menu.resourceid}>{menu.name}</Menu.Item>
            }
            
        }
        windowResize() {
            let iframeHeight = window.innerHeight - 64 - 50 - 10
            this.setState({
                iframeHeight: iframeHeight
            })
        }
        tabChange(tabKey) {
            this.setState({
                currentTab: tabKey
            })
        }
        tabEdit(targetKey, action){
            if (action == 'remove')
                this.remove(targetKey);
        };
        remove(targetKey) {
            const { tabs, currentTab } = this.state;
            let newActiveKey = currentTab;
            let lastIndex;
            tabs.forEach((pane, i) => {
                if (pane.key === targetKey) {
                    lastIndex = i - 1;
                }
            });
            const newPanes = tabs.filter(pane => pane.key !== targetKey);
            if (newPanes.length && newActiveKey === targetKey) {
                if (lastIndex >= 0) {
                    newActiveKey = newPanes[lastIndex].key;
                } else {
                    newActiveKey = newPanes[0].key;
                }
            }
            this.setState({
                tabs: newPanes,
                currentTab: newActiveKey,
            });
        };
        componentDidMount() {
            this.loadUserMenu()
            this.windowResize()
            window.addEventListener('resize', this.windowResize);
            window.closeModel = this.handleModelClose
        }
        componentWillUnmount() {
            window.removeEventListener('resize', this.windowResize);
        }
        render(){
            const menus = this.state.menuList.map((menu, index)=>{
                if (!menu.childs || menu.childs.length <= 0) {
                    return <Menu.Item key={menu.resourceid}>menu.name</Menu.Item>
                } else {
                    return this.createSubMenu(menu)
                }
            })
            return (
                <Layout>
                    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
                    
                    <Menu theme="dark" mode="horizontal" onClick={this.menuItemClick}>
                        <Menu.SubMenu key="subsystem" title={this.state.systemName}>
                            {
                                this.state.subsystemList.map((sub, index)=>
                                    <Menu.Item key={sub.resourceid}>{sub.cnname}</Menu.Item>
                                )
                            }
                        </Menu.SubMenu>
                        <Menu.Item key="homePage">首页</Menu.Item>
                        {menus}
                        <Menu.SubMenu key="userOp" title={this.state.userName} style={{float: 'right'}}>
                            <Menu.Item key="modifyPwd">修改密码</Menu.Item>
                            <Menu.Item key="changeTheme">更换风格</Menu.Item>
                            <Menu.Item key="logout">退出登录</Menu.Item>
                        </Menu.SubMenu>
                    </Menu>

                    <Modal
                        title={this.state.modelTitle}
                        visible={this.state.show}
                        footer={null}
                        onCancel={this.handleModelClose}
                        destroyOnClose={true}
                        keyboard={false}
                        width={'70%'}
                    >
                        <iframe name="modelIframe" src={this.state.modelIframeUrl} style={{"minHeight": "550px"}}
                            height="100%" width="100%" frameBorder="0" scrolling="auto"></iframe>
                    </Modal>
                    </Header>
                    <Content className="site-layout" style={{marginTop: 64 }}>
                
                    <div className="site-layout-background">
                        <Tabs type="editable-card" activeKey={this.state.currentTab} hideAdd={true}    
                            onChange={this.tabChange} onEdit={this.tabEdit}>
                            {this.state.tabs.map(tab => (
                            <Tabs.TabPane tab={tab.name} key={tab.key} closable={tab.closable}>
                                <div style={{ height : this.state.iframeHeight }}>
                                    <iframe name={tab.key} src={tab.path} height="100%" width="100%" frameBorder="0" scrolling="auto"></iframe>
                                </div>
                            </Tabs.TabPane>
                            ))}
                        </Tabs>
                    </div>
                    </Content>
                </Layout>
            )
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <Root />
        </antd.ConfigProvider> ,
        document.getElementById('app')
    );
  
    </script>
</body>
</html>